
<style lang="less">
.cps-icon-checkbox {
    vertical-align: middle;
    .icon-yuan {
        fill: #b2b2b2;
    }
    .icon-gou {
        display: none;
        fill: @font-first;
    }

    &[checked] {
        .icon-yuan {
            display: none;
        }
        .icon-gou {
            display: block;
        }
    }

    &[disabled] {
        .icon-yuan {
            fill: #dddddd !important;
        }
    }
}
</style>
<template>
    <svg class="cps-icon-checkbox" :disabled="disabled" :checked="checked" :width="width | px2rem" viewBox="0 0 1024 1024" version="1.1">
        <path class="icon-yuan" d="M885.356336 953.811428h-743.738945c-38.637995 0-70.064752-31.438013-70.064752-70.076009v-743.738945c0-38.637995 31.426757-70.076008 70.064752-70.076008h743.738945c38.637995 0 70.076008 31.438013 70.076009 70.076008v743.738945c0 38.637995-31.438013 70.076008-70.076009 70.076009z m-743.739968-837.371462c-12.981662 0-23.544229 10.562567-23.544229 23.555485v743.738945c0 12.992919 10.562567 23.555485 23.544229 23.555485h743.738945c12.992919 0 23.555485-10.562567 23.555485-23.555485v-743.738945c0-12.992919-10.562567-23.555485-23.555485-23.555485h-743.738945z" fill="#CCCCCC"></path>
        <path class="icon-gou" d="M908.123876 66.690912H121.163547c-27.163663 0-49.185212 22.020526-49.185212 49.185212v786.960329c0 27.163663 22.020526 49.185212 49.185212 49.185212h786.960329c27.163663 0 49.185212-22.020526 49.185212-49.185212V115.876124c-0.001023-27.164686-22.021549-49.185212-49.185212-49.185212zM796.182364 363.253234l-339.162559 353.2453c-17.136286 17.841344-44.919049 17.841344-62.055335 0L233.005798 547.809577c-17.150612-17.841344-17.819854-46.088688-1.512446-63.085804 16.307408-16.974603 43.419905-16.270569 60.569493 1.566682l123.58469 128.724757c5.718235 5.935176 14.969946 5.935176 20.687158 0l300.788577-313.279053c17.133216-17.84339 44.249807-18.543332 60.570518-1.554402 16.320711 16.97665 15.623839 45.232181-1.511424 63.071477z" fill="#11D96F"></path>
    </svg>
</template>

<script>
export default {
    name: "cps-icon-check",
    props: {
        checked: {
            type: Boolean,
            default: false
        },
        width: {
            type: Number,
            default: 30
        },
        disabled: {
            type: Boolean,
            default: false
        }
    }
};
</script>
